<template>
    <view class="room-bottom u-flex u-row-between">
        
        <!-- 消息输入 start -->
        <message class="message" @send-message="sendMessage" :isTimReady="isTimReady"></message>
        <!-- 消息输入 end -->
		<view>
			<!-- 送礼物 start -->
			<gift v-if="!isPusher" class="gift" @showGift="showGift"></gift>
			<!-- 送礼物 end -->
			<!-- 当前商品 start -->
			<goods v-if="!isPusher" class="goods" @showgoods="showgoods"></goods>
			<!-- 当前商品 end -->
			<!-- 退出直播 start -->
			<back class="back" :isPusher="isPusher" @quitGroup="quitGroup"></back>
			<!-- 退出直播 end -->
		</view>
        
    </view>
</template>

<script>
    import back from './back.vue'
    import goods from './goods.vue'
    import gift from './gift.vue'
    import message from './message.vue'
	
    export default {
        props: {
            header: {},
            isTimReady:false,
            isPusher:false
        },
		components:{
			back,
			goods,
			gift,
			message
		},
        data() {
			return {}
		},
        methods: {
            showgoods(){
                this.$emit('showgoods')
            },
            showGift(){
                this.$emit('showGift')
            },
            quitGroup(){
                this.$emit('quitGroup')
            },
            sendMessage(data){
                this.$emit('send-message',data)
            },
            like(){
                this.$emit('like')
            }
        },
        created() {},
        mounted() {}
    }
</script>

<style type="scss">
    .goods {
        margin: 0 10rpx 0 10rpx;
        display: inline-block;
        vertical-align: middle
    }
    .gift {
        margin: 0 10rpx 0 10rpx;
        display: inline-block;
        vertical-align: middle
    }
    .like {
        margin: 0 10rpx 0 10rpx;
        display: inline-block;
        vertical-align: middle
    }
    .message {
        width: 450rpx;
        height: 66rpx;
        display: inline-block;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 40rpx;
        border-radius: 40rpx;
        vertical-align: middle
    }
    .back{
		margin: 0 0 0 10rpx;
        display: inline-block;
        vertical-align: middle
    }
</style>